<template>
<div class="comment-section">
    <h2 class="comment-title">评论区</h2>
    <div v-for="(comment, index) in comments" :key="index" class="comment-item">
        <el-row :gutter="20" class="comment-content">
            <el-col :span="3" class="comment-avatar">
                <el-avatar :size="60" :src="comment.avatar" />
            </el-col>
            <el-col :span="17" class="comment-details">
                <strong>{{ comment.author }}:</strong>
                <p v-html="comment.content"></p>
            </el-col>
            <el-col :span="4" class="comment-time">{{ formatTime(comment.time) }}</el-col>
        </el-row>
    </div>
    <div class="add-comment">
        <el-input
            v-model="content"
            placeholder="输入评论内容"
            type="textarea"
            :rows="3"
            class="comment-input"
        ></el-input>
        <el-button type="primary" @click="addComment" class="submit-button">发送</el-button>
    </div>
</div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
export default {
    name: 'Comment',
    props: {
        projectId: {
            type: Number,
            required: true,
        },
    },
    data() {
        return {
            content: '',
        };
    },
    computed: {...mapState('Comments', ['comments']) },
    methods: {
        ...mapMutations('Comments', ['setComments']),
        ...mapActions('Comments', ['getComments', 'saveComments']),
        ...mapActions('User', ['getUserByUid']),
        // 格式化时间
        formatTime(time) {
            const date = new Date(time);
            return date.toLocaleString(); 
        },
        // 添加评论
        async addComment() {
            const userid=JSON.parse(localStorage.getItem('User')).userid;
            const pid=Number(this.projectId);
            // console.log("用户id:",userid,"文章id:",pid)
            // console.log("用户id数据类型:",typeof userid,"文章id数据类型:",typeof pid)
            if (!this.content.trim()) {
                this.$message.error('评论内容不能为空');
                return;
            }
            const data={
                uid:userid,
                pid:pid,
                content:this.content,
            }
            await this.saveComments(data);//等待评论提交完成
            this.content = ''; 
            this.$message.success('评论成功');
            location.reload();
        },
        // 初始化加载评论区数据
        async loadComments() {
            try {
                const comments = await this.getComments(this.projectId)||[];
                await Promise.all(comments.map(async (comment) => {
                    const user = await this.getUserByUid(comment.uid);
                    comment.author = user.username;
                    comment.avatar = user.avatar;
                }));
                this.setComments(comments);
            } catch (error) {
                console.error("加载评论时出错：", error);
                this.$message.error('加载评论失败，请重试');
            }
        },
    },
    mounted() {
        this.loadComments();
    },
};
</script>

<style scoped>
.comment-section {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.comment-item {
    margin-bottom: 10px;
    border-bottom:1px solid #dddddd;
    padding:10px;
}

.comment-content {
    display: flex;
    align-items: center; 
}

.comment-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-details {
    flex-grow: 1; 
    margin-left: 10px; 
}

.comment-time {
    font-size: 12px;
    color: #999;
    margin-left: auto; 
}

.add-comment {
    margin-top: 20px;
}

.comment-input {
    border: 1px solid rgb(122, 122, 122) !important;
    border-radius: 5px;
}

.submit-button {
    margin-top: 10px;
    border-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
}
</style>
